<template>
  <div id="app">

    <h1>{{ title }}</h1>
    <input type="text" v-model="item"/>
    <button @click="add(item)">添加</button>
<ul>
  <li  v-for="(todo,idx) in todos" :id="idx" :class="{done:todo.done}">
    <label>{{idx+1}}.{{todo.value}}</label>
    <time>{{todo.created|date}}</time>
  </li>
</ul>

    <div>总共{{todos.length}}个事项,{{done}}个已完成，{{todos.length-done}}个未完成。</div>
    <todo :total="todos.length" :done="done"/>
  </div>

</template>

<script>

import todo from './Tabs.vue'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

export default {
  name: 'app',
  components:{todo},//{"todo":todo}
  methods:{
    add(x){
      this.todos.push({value:this.item,done:false,created:Date.now()})
    }
  },
  computed:{
    done:function(){
      var count=0;
      for(var i=0;i<this.todos.length;i++){
        if(this.todos[i].done){
          count++;
        }
      }
      return count;
    }
  },
  data() {

    return {
      item:'',
      todos:[{value:'阅读一本书',done:false,created:1505978543695}
        ,{value:'写心得',done:true,created:Date.now()}]
      ,title:'vue-todos'
    }
  }
  ,filters:{
    date(val){
      return moment(val).calendar();
      //return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds();
    }
  }
}
</script>

<style>
  .done{
    text-decoration: line-through;
  }
</style>
